// 入口函数
$(function () {
 // 0. 接受id , 根据id获取文章所有信息,给form赋值
 // console.log(location.href.split('='));
 // console.log(location.href.split('=')[1]);

 function initForm() {
  let id = location.href.split('=')[1]
  // 发送ajax
  axios({
   method: 'GET',
   url: '/my/article/' + id // : 删除   / 保留
  }).then(res => {
   // 判断
   if (res.data.status != 0) {
    return layer.msg(res.data.message)
   }
   // console.log(res.data);
   // 成功后赋值
   form.val('formEdit', res.data.data)
   // 富文本 - 赋值
   setTimeout(function () {
    tinyMCE.activeEditor.setContent(res.data.data.content)
   }, 500)
   // 封面赋值
   let baseURL = 'http://api-breakingnews-web.itheima.net'
   let url = baseURL + res.data.data.cover_img
   $image
    .cropper('destroy') // 销毁旧的裁剪区域
    .attr('src', url) // 重新设置图片路径
    .cropper(options) // 重新初始化裁剪区域
  })
 }





 let layer = layui.layer
 let form = layui.form
 // 需求1 : 渲染文章分类
 initArtCateList()

 function initArtCateList() {
  // 发送请求
  axios({
   method: 'GET',
   url: '/my/article/cates'
  }).then(res => {
   ///  判断
   if (res.data.status != 0) {
    return layer.msg(res.data.message)
   }
   // 成功获取后  渲染
   let arr = [`<option value="">请选择文章类别</option>`]
   // 循环遍历
   res.data.data.forEach(ele => {
    arr.push(`
    <option value="${ele.Id}">${ele.name}</option>
          
    `)
   })
   // 循环之外赋值
   let str = arr.join("")
   $('[name=cate_id]').empty().html(str)
   // 文章分类,select标签渲染完成 form表单同步渲染
   form.render()
   // 用于修改的form表单赋值
   initForm()
  })
 }

 // 需求2: 初始化富文本编辑器
 initEditor()

 // 需求3: 文章封面
 // 1. 初始化图片裁剪器
 var $image = $('#image')

 // 2. 裁剪选项
 var options = {
  aspectRatio: 400 / 280,
  preview: '.img-preview',
  viewMode: 2,
  // 初始化的裁剪区域大小 0 - 1 之间，1 表示裁剪框占满整个区域
  autoCropArea: 1
 }

 // 3. 初始化裁剪区域
 $image.cropper(options)

 // 需求4: 确定状态
 let state // 设置为全局变量
 $('#btnSave1').on('click', function () {
  state = '已发布'
 })
 $('#btnSave2').on('click', function () {
  state = '草稿'
 })

 // 需求5: 选择封面
 $('#chooseImage').on('click', function () {
  $('#file').click()
 })
 // 给文本按钮注册change事件
 $('#file').on('change', function (e) {
  //  拿到用户选择的文件
  var file = e.target.files[0]
  // 非空校验
  if (file == undefined) {
   return layer.msg('此文章封面为空!')
  }
  // 根据选择的文件，创建一个对应的 URL 地址：
  var newImgURL = URL.createObjectURL(file)
  //  先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：
  $image
   .cropper('destroy') // 销毁旧的裁剪区域
   .attr('src', newImgURL) // 重新设置图片路径
   .cropper(options) // 重新初始化裁剪区域

 })

 // 表单提交
 $('#formPub').on('submit', function (e) {
  // 阻止表单默认提交
  e.preventDefault()
  // 更新表单  创建 formData对象
  let fd = new FormData(this)
  fd.append('state', state)
  // console.log(...fd);
  // 
  $image
   .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 400,
    height: 280,

   })
   .toBlob(function (blob) { // 将 Canvas 画布上的内容，转化为文件对象
    // 得到文件对象后，进行后续的操作
    fd.append('cover_img', blob)
    // console.log(...fd);
    // jQuery中的ajax 和 axios 两种方式实现文件上传
    // 第二种: axios版 发布文章
    axios({
     method: 'POST',
     url: '/my/article/edit',
     // 没有设置默认的传递参数方式,没有设置默认的编码
     data: fd
    }).then(res => {
     // 判断
     if (res.data.status != 0) {
      return layer.msg(res.data.message)
     }
     // 成功给出提示
     layer.msg('恭喜您,修改文章成功!')
     // 跳转到文章列表页
     // location.href = '/article/art_list.html'
     setTimeout(function () {
      window.parent.document.querySelector('#art_list').click()
     }, 1500)
    })



    // 第一种: jQuery中的ajax -  两个false
    // $.ajax({
    //  method: 'POST',
    //  url: 'http://api-breakingnews-web.itheima.net/my/article/add',
    //  // 两个false
    //  contentType: false,
    //  processData: false,
    //  data: fd,
    //  headers: {
    //   Authorization: localStorage.getItem('token')
    //  },
    //  success: function (res) {
    //   console.log(res);
    //   layer.msg(res.message)
    //  }
    // })


   })
 })
})